<template>
  <el-dialog
    :before-close="beforeClose"
    :visible.sync="show"
    :title="title"
    width="840px"
    @close="close"
    @closed="closed"
  >
    <!--    查询条件-->
    <el-row class="filter">
      <el-col :span="24" class="k-text-left k-lh-2-2">
        <el-radio-group v-model="type" class=" k-mr-10" @change="changeType">
          <el-radio-button label="refresh">刷新列表</el-radio-button>
          <el-radio-button label="download">下载列表</el-radio-button>
        </el-radio-group>
        <el-button type="primary" @click="_search">交叉轨迹</el-button>
      </el-col>
    </el-row>
    <!--    表格-->
    <el-table
      ref="tb"
      v-loading="LOADING"
      :data="TABLE_DATA"
      :size="SIZE"
      border
      height="500px"
      style="width: 100%"
      @selection-change="_handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <template v-for="(item) in setting">
        <el-table-column
          v-if="item.key === 'action'"
          :key="item.id"
          :label="item.name"
          :prop="item.key"
          :width="item.value"
          :fixed="item.fixed"
        >
          <template slot-scope="scope">
            <el-button @click="handleAssociation(scope.row)">展开关联</el-button>
            <el-button @click="handleReason(scope.row)">异常原因</el-button>
            <el-button @click="handleRelieve(scope.row)">解除异常</el-button>
            <el-button @click="handleInfo(scope.row)">个人资料</el-button>
          </template>

        </el-table-column>
        <el-table-column
          v-else
          :key="item.id"
          :label="item.name"
          :prop="item.key"
          :width="item.value"
        />
      </template>
    </el-table>
    <!--    分页-->
    <pagination />
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import list from '@/list'
import { ssqOptions, streetOptions, adminOptions } from '@/list/data'
import WhereaboutsClass from '@/models/whereabouts-class'
const whereaboutsClass = new WhereaboutsClass()
export default {
  name: 'Detail',
  mixins: [list],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      show: false,
      ssqOptions,
      streetOptions,
      adminOptions,
      setting: whereaboutsClass.list(),
      form: {
        ssq: '',
        street: '',
        admin: '',
        remark: ''
      }
    }
  },
  computed: {
    title() {
      const text = '展开信息：张三的个人轨迹'
      return text
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.show = val
      }
    }
  },
  mounted() {
    this.show = this.visible
  },
  methods: {
    changeType(item) {
      console.log('选择类型', item)
    },
    handleChange(value) {
      console.log(value)
    },
    getData() {
      console.log('获取数据')
    },
    handleClose() {
      console.log('点击关闭')
      this.beforeClose()
    },
    handleAdopt() {
      console.log('通过')
      this.$notify.success('通过')
      this.handleClose()
    },
    handleRefuse() {
      console.log('拒绝')
      this.$notify.error('拒绝')
      this.handleClose()
    },
    handleSubmit() {
      console.log('点击确定')
      this.$notify.success('保存成功')
      this.handleClose()
    },
    beforeClose() {
      console.log('关闭前的回调')
      this.show = false
      this.$emit('update:visible', false)
    },
    close() {
      console.log('关闭的回调')
    },
    closed() {
      console.log('关闭动画结束后的回调')
    }
  }
}
</script>

<style scoped>

</style>
